<template>
<view class="body">
    <form @submit="select" class="select-item">
        <view class="border">
            <view class="title">城市</view>
            <view class="content">
                <picker class="city" mode="selector" :range="info" :value="cityIndex" @change="changeCity" name="city" range-key="cityname">
                    {{info[cityIndex].cityname}}
                </picker>
                <image src="/static/images/calculator/1.png" class="back"></image>
            </view>
        </view>
        <view class="border">
            <view class="title">查询项目</view>
            <view class="content">
                <picker class="type" mode="selector" :range="type" :value="typeIndex" @change="changeType" name="type">
                    {{type[typeIndex]}}
                </picker>
                <image src="/static/images/calculator/1.png" class="back"></image>
            </view>
        </view>
        <view class="border">
            <view class="title">期数</view>
            <view class="content">
                <picker class="type" mode="selector" :range="date" :value="dateIndex" @change="changeDate" name="date">
                    {{date[dateIndex]}}
                </picker>
                <image src="/static/images/calculator/1.png" class="back"></image>
            </view>
        </view>
        <!-- <view class="border">
            <view class="title">姓名</view>
            <input name="name" placeholder="请输入姓名" class="content" />
        </view> -->
        <button form-type="submit" class="search">查询</button>
    </form>
    <view class="res" v-if="result">
        <view class="result">
            <view class="head">
                <image src="/static/images/sys/xf_icon2.png" class="head-icon"></image>
                <text>摇号中签结果公告</text>
            </view>
            <view class="res-border">
                <view class="res-title">摇号增量指标（个）：{{result.yaohao.zhibiao}}</view>
                <view class="res-blue">
                    <view>个人中签率（%）：{{result.rate.per_rate}}</view>
                    <view>单位中签率（%）：{{result.rate.com_rate}}</view>
                </view>
                <view class="res-text">
                    <view>个人（个）：{{result.yaohao.per_num}}</view>
                    <view>单位（个）：{{result.yaohao.com_num}}</view>
                </view>
            </view>
        </view>
        <view class="res-of-price">
            <view class="head">
                <image src="/static/images/sys/xf_icon2.png" class="head-icon"></image>
                <text>竞价结果公告</text>
            </view>
            <view class="res-for-all res-border">
                <view class="res-title">摇号增量指标（个）：{{result.jingjia.zhibiao}}</view>
                <view class="res-text">
                    <view>个人（个）：{{result.jingjia.per_num}}</view>
                    <view>单位（个）：{{result.jingjia.com_num}}</view>
                </view>
            </view>
            <view class="res-for-per res-border">
                <view class="res-title">个人</view>
                <view>最低成交价（元）：{{result.price.per_min}}</view>
                <view>平均成交价（元）：{{result.price.per_avg}}</view>
            </view>
            <view class="res-for-com res-border">
                <view class="res-title">单位</view>
                <view>最低成交价（元）：{{result.price.com_min}}</view>
                <view>平均成交价（元）：{{result.price.com_avg}}</view>
            </view>
        </view>
    </view>
    <view class="charts">
        <view class="tab-bar">
            <view :class="'tab-item ' + (tabIndex == 0 ? 'click' : '')" @tap="tabBarClick" data-index="0">
                <text>车牌竞价走势图</text>
                <view class="line" v-if="tabIndex == 0"></view>
            </view>
            <view :class="'tab-item ' + (tabIndex == 1 ? 'click' : '')" @tap="tabBarClick" data-index="1">
                <text>摇号中签走势图</text>
                <view class="line" v-if="tabIndex == 1"></view>
            </view>
        </view>
        <view class="charts-detail">
            <view class="price-charts" v-if="tabIndex == 0">
                <view class="charts-title">
                    <view class="control">
                        <view class="shrink" @tap="shrink" data-type="0">缩小</view>
                        <view class="big" @tap="big" data-type="0">放大</view>
                    </view>
                    <view class="charts-title">车牌竞价走势图</view>
                    <navigator class="more" :url="'../detail/detail?type=price&citycode=' + info[cityIndex].citycode + '&qi=' + lastQi">更多>></navigator>
                </view>
                <canvas canvas-id="price"></canvas>
            </view>
            <view class="hit-charts" v-if="tabIndex == 1">
                <view class="charts-title">
                    <view class="control">
                        <view class="shrink" @tap="shrink" data-type="1">缩小</view>
                        <view class="big" @tap="big" data-type="1">放大</view>
                    </view>
                    <view class="charts-title">摇号中签走势图</view>
                    <navigator class="more" :url="'../detail/detail?type=hit&citycode=' + info[cityIndex].citycode + '&qi=' + lastQi">更多>></navigator>
                </view>
                <canvas canvas-id="hit"></canvas>
            </view>
        </view>
    </view>
</view>
</template>

<script>
import Charts from "../../../../utils/wxcharts";
import util from "../../../../utils/util";
const app = getApp();
var price, hit;
var options = {
  dataPointShape: "circle",
  categories: [],
  type: 'line',
  xAxis: {
    type: "calibration"
  },
  yAxis: {
    title: '成交金额 (元)',
    min: 0,
    gridColor: "#F1F1F1"
  },
  width: 325,
  height: 240,
  dataLabel: true,
  animation: false
};
var halfyear = [];
var fullyear = [];
var xType = 0; // 0：半年；1：一年；
// 0：半年；1：一年；
var dataList = [];

export default {
  data() {
    return {
      info: [],
      cityIndex: 0,
      type: ["摇号中签"],
      typeIndex: 0,
      tabIndex: 0,
      result: "",
      date: [],
      dateIndex: 0,
      lastQi: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    util.request('zhuanti.php', {
      action: "yh_qi"
    }).then(res => {
      if (res.data.message == "success") {
        this.setData({
          info: res.data.data,
          date: res.data.data[0].qi
        });
        this.getCityData();
      }
    });
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();

    for (let i = month; i >= month - 5; i--) {
      if (i > 0) halfyear.unshift(parseInt(`${year}${util.formatNumber(i)}`));else if (i == 0) halfyear.unshift(parseInt(`${year - 1}${util.formatNumber(12 - i)}`));else if (i < 0) halfyear.unshift(parseInt(`${year - 1}${util.formatNumber(12 + i)}`));
    }

    for (let i = month; i > month - 12; i--) {
      if (i > 0) fullyear.unshift(parseInt(`${year}${util.formatNumber(i)}`));else if (i == 0) fullyear.unshift(parseInt(`${year - 1}${util.formatNumber(12 - i)}`));else if (i < 0) fullyear.unshift(parseInt(`${year - 1}${util.formatNumber(12 + i)}`));
    }

    options.categories = halfyear;
  },
  onShareAppMessage: function () {},
  methods: {
    getCityData() {
      let year = new Date().getFullYear();
      let month = util.formatNumber(new Date().getMonth() + 1);
      let qiList = this.info[this.cityIndex].qi;
      this.setData({
        lastQi: qiList[qiList.length - 1]
      });
      util.request('zhuanti.php', {
        action: "yaohaochaxun",
        citycode: this.info[this.cityIndex].citycode,
        qi: `${year}${month}`
      }).then(res => {
        if (res.data.message == "success") {
          dataList = res.data.data;
          this.mackCircle("price");
        }
      });
    },

    mackCircle(type = "price") {
      let perMin = [];
      let comMin = [];
      let perRate = [];
      let comRate = [];
      let categories = [];

      if (dataList) {
        halfyear.forEach(date => {
          categories = halfyear;

          if (dataList.year.some(item => item.qi == date)) {
            perMin.push(dataList.halfyear.filter(item => item.qi == date)[0].price.per_min);
            comMin.push(dataList.halfyear.filter(item => item.qi == date)[0].price.com_min);
            perRate.push(dataList.halfyear.filter(item => item.qi == date)[0].rate.per_rate);
            comRate.push(dataList.halfyear.filter(item => item.qi == date)[0].rate.com_rate);
          } else {
            perMin.push(0);
            comMin.push(0);
            perRate.push(0);
            comRate.push(0);
          }
        });
      }

      if (type == "price") {
        price = new Charts({
          canvasId: 'price',
          series: [{
            name: '个人最低成交价',
            data: perMin,
            color: "#F5C27E"
          }, {
            name: '单位最低成交价',
            data: comMin,
            color: "#9CCC52"
          }],
          ...options
        });
      } else if (type == "hit") {
        hit = new Charts({
          canvasId: 'hit',
          series: [{
            name: '个人中签率',
            data: perRate,
            color: "#F5C27E"
          }, {
            name: '单位中签率',
            data: comRate,
            color: "#9CCC52",
            format: val => `${val}%`
          }],
          ...options,
          yAxis: {
            title: '中签率(%)'
          }
        });
      }
    },

    tabBarClick(e) {
      let tabIndex = e.currentTarget.dataset.index;
      this.setData({
        tabIndex
      });
      this.mackCircle(tabIndex == 0 ? "price" : "hit");
    },

    changeCity(e) {
      let cityIndex = e.detail.value;
      this.setData({
        cityIndex,
        tabIndex: 0,
        result: ""
      });
      this.setData({
        date: this.info[this.cityIndex].qi,
        dateIndex: 0
      });
      this.getCityData();
    },

    changeDate(e) {
      let dateIndex = e.detail.value;
      this.setData({
        dateIndex,
        result: ""
      });
    },

    getDetailInfo() {
      let perMin = [];
      let comMin = [];
      let perRate = [];
      let comRate = [];
      let categories = [];

      if (xType == 0) {
        halfyear.forEach(date => {
          categories = halfyear;

          if (dataList.halfyear.some(item => item.qi == date)) {
            perMin.push(dataList.halfyear.filter(item => item.qi == date)[0].price.per_min);
            comMin.push(dataList.halfyear.filter(item => item.qi == date)[0].price.com_min);
            perRate.push(dataList.halfyear.filter(item => item.qi == date)[0].rate.per_rate);
            comRate.push(dataList.halfyear.filter(item => item.qi == date)[0].rate.com_rate);
          } else {
            perMin.push(0);
            comMin.push(0);
            perRate.push(0);
            comRate.push(0);
          }
        });
      } else if (xType == 1) {
        fullyear.forEach(date => {
          categories = fullyear;

          if (dataList.year.some(item => item.qi == date)) {
            perMin.push(dataList.year.filter(item => item.qi == date)[0].price.per_min);
            comMin.push(dataList.year.filter(item => item.qi == date)[0].price.com_min);
            perRate.push(dataList.year.filter(item => item.qi == date)[0].rate.per_rate);
            comRate.push(dataList.year.filter(item => item.qi == date)[0].rate.com_rate);
          } else {
            perMin.push(0);
            comMin.push(0);
            perRate.push(0);
            comRate.push(0);
          }
        });
      }

      return {
        perMin,
        comMin,
        perRate,
        comRate,
        categories
      };
    },

    select(e) {
      let qi = this.date[e.detail.value.date];
      util.request('zhuanti.php', {
        action: "yaohaochaxun",
        citycode: this.info[this.cityIndex].citycode,
        qi
      }).then(res => {
        if (res.data.message == "success") this.setData({
          result: res.data.data.yh
        });else this.setData({
          result: ""
        });
        this.getCityData();
      });
    },

    shrink(e) {
      let type = e.currentTarget.dataset.type == 0 ? "price" : "hit";
      xType = 0;
      this.mackCircle(type);
    },

    big(e) {
      let type = e.currentTarget.dataset.type == 0 ? "price" : "hit";
      xType = 1;

      if (type == "price") {
        price.updateData({
          categories: this.getDetailInfo().categories,
          series: [{
            name: '个人最低成交价',
            data: this.getDetailInfo().perMin,
            color: "#F5C27E"
          }, {
            name: '单位最低成交价',
            data: this.getDetailInfo().comMin,
            color: "#9CCC52"
          }]
        });
      } else if (type == "hit") {
        hit.updateData({
          categories: this.getDetailInfo().categories,
          series: [{
            name: '个人中签率',
            data: this.getDetailInfo().perRate,
            color: "#F5C27E"
          }, {
            name: '单位中签率',
            data: this.getDetailInfo().comRate,
            color: "#9CCC52",
            format: val => `${val}%`
          }]
        });
      }
    },

    changeType() {
      console.log("占位：函数 changeType 未声明");
    }

  }
};
</script>
<style>
input {
    font-size: 30rpx;
    text-align: right;
}

canvas {
    width: 100%;
    height: 481rpx;
    background-color: #FFFFFF;
}

.click {
    color: #3B99FB;
}

.body {
    padding-bottom: 104rpx;
    background-color: #F1F1F1;
    font-weight: 500rpx;
}

.border {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 34rpx 36rpx;
    font-size: 32rpx;
    color: #000000;
    border-bottom: 10rpx solid #F1F1F1;
    background-color: #FFFFFF;
}

.content {
    display: flex;
    align-items: center;
}

.back {
    width: 18rpx;
    height: 29rpx;
    margin-left: 33rpx;
}

.search {
    height: 90rpx;
    margin: 38rpx 36rpx;
    line-height: 90rpx;
    color: #FFFFFF;
    font-size: 34rpx;
    border-radius: 15rpx;
    background-color: #3B99FB;
}

.res {
    margin: 0 30rpx;
}

.result {
    margin-bottom: 35rpx;
}

.head {
    margin-bottom: 26rpx;
    font-size: 32rpx;
    color: #141414;
}

.head-icon {
    width: 18rpx;
    height: 26rpx;
    margin-right: 14rpx;
}

.res-border {
    padding: 34rpx 28rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    font-size: 29rpx;
}

.res-title {
    margin-bottom: 25rpx;
    color: #333333;
    font-weight: bold;
}

.res-blue {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    color: #3B99FB;
}

.res-text {
    display: flex;
    align-items: center;
}

.res-blue view:first-child,
.res-text view:first-child {
    min-width: 306rpx;
    margin-right: 23rpx;
}

.tab-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 32rpx;
    color: #333333;
    font-weight: 500;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 66rpx;
}

.tab-item text {
    margin-bottom: 16rpx;
}

.line {
    width: 83rpx;
    height: 8rpx;
    border-radius: 17rpx;
    background-color: #3B99FB;
}

.charts-title {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20rpx 0;
}

.charts-detail {
    margin: 34rpx 30rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    overflow: hidden;
}

.control {
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #3B99FB;
    font-size: 24rpx;
}

.control text {
    margin-right: 29rpx;
}

.charts-title {
    font-size: 28rpx;
    color: #333333;
    background-color: rgb(218, 229, 247);
}

.more {
    color: #3B99FB;
    font-size: 24rpx;
}

.control view {
    margin-right: 29rpx;
}
</style>